<!-- 水电抄表 -->
<template>
	<view>
		<u-sticky>
			<view class="nl-shadow-box nl-box-padding nl-margin-bottom-md">
				<!-- 搜索 -->
				<view class="nl-search-box">
					<view class="search">
						<u-icon class="icon" name="search" color="#D1D1D1" size="40"></u-icon>
						<u-input v-model="roomNum" class="input" type="text" placeholder="请填写房屋编号，如1-1-1102"
							placeholder-style="font-size:25rpx;color:#D1D1D1" />
						<view class="button" @click="search()">搜索</view>
						<view class="button-yellow" @click="goToAddmeter()">开始抄表</view>
					</view>
				</view>
			</view>
		</u-sticky>


		<view class="nl-box-padding" v-if="hasNet == 'true'">
			<view class="scroll-box" v-if="hasInfo">
				<view class="nl-shadow-box nl-box-padding nl-margin-bottom-md meter-list" v-for="item in data">
					<view class="nl-margin-bottom-md">
						<view class="text-black">{{item.objName}}</view>
						<view class="text-gray" style="font-size: 23rpx;">{{item.curReadingTime}}</view>
					</view>
					<view>
						<view class="text-gray">本期读数：{{item.curDegrees}}</view>
						<view class="text-gray">{{item.meterType == '1010'?'电表':'水表'}}</view>
					</view>
				</view>
				<u-loadmore :status="status" margin-top="40" />
			</view>
			<view v-else>
				<noData noDataText="暂无数据～"></noData>
			</view>
		</view>

		<view v-else>
			<netError v-if="hasNet == 'false'" @refresh="refresh()"></netError>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		listMeterWaters
	} from '@/api/meterReading.js'
	export default {
		data() {
			return {
				data: [],
				roomNum: '', //房间号

				hasInfo: '', //是否有数据
				hasNet: '', //是否有网络

				listBox: [], // 避免上拉刷新时，页面出现空白
				page: 1,
				records: 0,
				status: 'loadmore',
			}
		},
		onLoad() {
			// this.listMeterWaters(this.page)
		},
		onShow() {
			this.refresh()
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		/**
		 * 上拉加载
		 */
		onReachBottom() {
			console.log('页面触底了')
			if (this.status == 'loading') { // 防止多次触发

			} else {
				this.status = 'loading'
				if (this.page <= this.records) {
					this.listMeterWaters(this.page)
				} else {
					this.status = 'nomore'
				}
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.roomNum = ''
			this.refresh()
		},
		methods: {
			// 搜索
			search() {
				this.refresh()
			},
			// 跳转抄表页面
			goToAddmeter() {
				uni.navigateTo({
					url: '/pages/home/meterReading/addmeter/addmeter'
				})
			},
			// 获取水电抄表列表
			listMeterWaters(page) {
				var that = this
				let data = {
					storeId: this.userInfo.storeId,
					userId: this.userInfo.userId,
					communityId: this.userCommunity.communityId,
					roomNum: this.roomNum,
					page: page,
					row: 10
				}
				listMeterWaters(data).then((res) => {
					console.log('获取水电抄表', res)
					if (res.code == 0) {
						if (res.data.length == 0) {
							that.listBox = []
							that.hasInfo = false
							that.hasNet = 'true'
							return;
						}
						that.hasNet = 'true'
						that.hasInfo = true
						console.log('records', res.records)
						console.log('page', that.page)
						if (that.page == res.records) {
							console.log('that.page', that.page)
							that.status = 'nomore'
						} else {
							that.status = 'loadmore'
						}
						that.page++
						that.records = res.records
						for (let i of res.data) {
							that.listBox.push(i)
						}
						that.data = that.listBox
					}
				}).catch(function(reason) {
					that.hasInfo = ''
					that.hasNet = 'false'
					console.log('that.hasNet', typeof that.hasNet)
				})
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.data = []
				this.hasInfo = '' //是否有数据
				this.hasNet = '' //是否有网络
				this.listBox = [] // 避免上拉刷新时，页面出现空白
				this.page = 1
				this.records = 0
				this.listMeterWaters(1)
			}
		}
	}
</script>

<style lang="scss">
	.nl-search-box {
		padding: 20rpx 0;
		border-bottom: 2rpx solid $uni-bg-color-grey;

		.search {
			height: 72rpx;
			display: flex;
			align-items: center;
			position: relative;
			border-radius: 8rpx;
			overflow: hidden;
			background-color: #F3F3F3;
		}

		.icon {
			margin: 0 16rpx 0 24rpx;
		}

		.input {
			flex: 1;
			font-size: $uni-font-size-base;
			margin-right: 15rpx;
		}

		.button {
			width: 140rpx;
			line-height: 72rpx;
			margin-left: auto;
			text-align: center;
			color: #FFFFFF;
			user-select: none;
			font-size: $uni-font-size-base;
			background-color: $nl-color-main;
			border-radius: 0 8rpx 8rpx 0;

		}

		.button:active {
			background-color: #0f70d6;
		}

		.button-yellow {
			width: 140rpx;
			line-height: 72rpx;
			margin-left: auto;
			text-align: center;
			color: #FFFFFF;
			user-select: none;
			font-size: $uni-font-size-base;
			background-color: #FFC02D;
			margin-left: 16rpx;
			border-radius: 8rpx
		}

		.button-yellow:active {
			background-color: #daa72d;
		}
	}

	.meter-list {
		padding: 20rpx;
		display: flex;
		// align-items: center;
		flex-direction: column;

		view {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.text-black {
			color: #444444;
		}

		.text-gray {
			color: #AFAFAF;
		}
	}

	.scroll-box {
		width: 100%;
		// height: calc(100vh - 136rpx);
		padding-bottom: 64rpx;
	}
</style>
